<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        padding-left: 200px;
        padding-right: 150px;
        overflow: auto;
      }
      #container p {
        float: left;
      }
      .center {
        width: 100%;
        background-color: lightcoral;
      }
      .left {
        width: 200px;
        position: relative;
        left: -200px;
        margin-left: -100%;
        background-color: lightcyan;
      }
      .right {
        width: 150px;
        margin-right: -150px;
        background-color: lightgreen;
      }
      .clearfix:after {
        content: "";
        display: table;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="container" class="clearfix">
      <p class="center">我是中间</p>
      <p class="left">我是左边</p>
      <p class="right">我是右边</p>
    </div>
  </body>
  <script>
    function Person(name, age) {
      this.name = name;
      this.age = age;
      this.say = () => {
        // console.log(this, this.name);
      };
    }
    Person.prototype.work = function () {
      console.log(this, "this>>>>");
    };
    console.log(new Person());
    const p1 = new Person("xx", 5);
    const p2 = new Person("xm", 6);

    p1.say();
    p2.say();
    p1.work();

    function Doctor(name, age) {
      //获取父类构造函数上的属性和方法
      Person.call(this, name, age);
    }
    //继承父类原型上的方法和属性
    Doctor.prototype = new Person();
    Doctor.prototype.work2 = function () {
      console.log(this, ">>>>>");
    };
    //this指向回自己的构造函数
    Doctor.prototype.constructor = Doctor;
    const d1 = new Doctor();
    console.log(d1);
    d1.work2();
    d1.work();
  </script>
</html>
